<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .all{
        margin:20px;
    }
    .header{
        
        
        height: 50px;
        
    }
    .header_img{
        
        width: 120px;
        height: 50px;
        float: left;
        
    }
    .header_fast{
        background:#BBFFFF;
        width: 300px;
        height: 20px;
        float: right;
        position: relative;
        top:19px;
        padding:5px;
    }
    #icon_count{
        float: left;
        position: relative;
        bottom:10px;
    }
    .header_fast_ul{
        padding:2px;
        margin-top:2px;
        margin-left:13px;
        float: left;
        position: absolute;
        top:0px;
        
        
    }
    .header_fast_ul li{
        list-style-type: none;
        float: left;
        text-align: center;
        line-height: 15px;
        margin:5px;
        
    }
    .navi{
        margin-top: 5px;
        background-image:url(image/menuBg.jpg) ;
        height: 35px;
        font-size:20px;
    }
    .navi_ul{
        padding:0px;
        margin:0px;
        
    }
    li{
        list-style-type: none;
    }
    .navi_ul li{
        
        float: left;
        margin-left:35px;
        margin-top:6px;
        color: white;
    }
    .banner{
        margin-top: 10px;
        
        height: 130px;
        
    }
    .banner img{
        height:130px;
        width: 100%;
    }
    .content{
        margin-top: 10px;
        
        height: 370px;
        border:1px seagreen solid;
    }
    
    .content_top{
        margin-top: 10px;
        left: 20px;
        
        height: 25px;
        width: 200px;    
    }
    .content_top img{
        position: relative;
        right:  17px;
    }
    .content_left{
        margin-top: 10px;
        margin-left: 15px;
        height: 300px;
        width: 47%;
        float: left;
        position: relative;
    }
    #content_left_img1{
        position:absolute;
        top:25px;
        left:15px;
    }
    #content_left_img2{
        margin-top: 25px;
    }
    p{
        font-size: 13px;
        line-height:20px;
    }
    .content_left_img{
        height: 300px;
        width: 47%;
        float: left;
    }
    .content_left_book{
        height: 300px;
        width: 47%;
        
        float: right;
    }
    .content_right{
        margin-top: 10px;
        margin-left: 15px;
        margin-right: 15px;
        
        height: 300px;
        width: 47%;
        
        float: right;
    }
    .content_right1{
        
        height: 150px;
        width: 100%;
        
        position: relative;
        padding:0px;
    }
    .content_right2{
        height: 150px;
        width: 100%;
        position: relative;
    }
    
    #content_right1_img1{
        position:absolute;
        top:25px;
        left:1px;
        float: left;
    }
    #content_right1_img2{
        margin-top:25px;
    }
    .content_right1_img{
        height: 150px;
        width: 20%;
        float: left;
    }
    .content_right1_book{
        height: 150px;
        width: 75%;
        float: right;
    }

    .footer{
        font:small;
        color: gray;
        font-size: 11px;
        text-align: center;
    }
</style>
<body>
    
    <div class="all">
        <div class="header">
            <div class="header_img"><img src="image/logo.jpg"></div>
            <div class="header_fast">
                <img src="image/icon_count.png" id="icon_count">
                <ul class="header_fast_ul">
                    <li><a href="">尾品汇</a></li>
                    <li><a href="">当当优品</a></li>
                    <li><a href="">数字馆</a></li>
                    <li><a href="">都看阅器</a></li>
                </ul>
            </div>
        </div>
        <div class="navi">
            <ul class="navi_ul">
                <li><a href="">首页</a></li>
                <li><a href="">图书</a></li>
                <li><a href="">音像</a></li>
                <li><a href="">童装</a></li>
                <li><a href="">服装</a></li>
                <li><a href="">鞋靴</a></li>
                <li><a href="">运动</a></li>
                <li><a href="">箱包</a></li>
                <li><a href="">美妆</a></li>
                <li><a href="">珠宝</a></li>
                <li><a href="">家居</a></li>
                <li><a href="">食品</a></li>
                <li><a href="">酒</a></li>
                <li><a href="">手机</a></li>
                <li><a href="">数码</a></li>
                <li><a href="">电脑</a></li>
                <li><a href="">家电</a></li>
            </ul>
        </div>
        <div class="banner">
            <img src="image/banner.png">
        </div>
        <div class="content">
            <div class="content_top">
                <img src="image/bg_bang.gif" id="bg_bang">
            </div>
            <ul>
                <div class="content_left">
                    <li>
                    <div class="content_left_img">
                        <span><img src="image/bookNo1.gif" id="content_left_img1" ></span>
                        <span><img src="image/book-01.jpg" id="content_left_img2"></span>
                    </div>
                    <div class="content_left_book">
                            <p style="font-size: large;"><a href="">偷影子的人</a></p>
                            <p class="text">作者：[法]马克·李维(Marc Levy)著</p>
                            <p class="text">出版社：湖南文艺出版社</p>
                            <p class="text">当当价：<span style="color: red;">￥17.90</span></p>
                            <p class="text">不知道姓氏的克雷尔。这就是你在我生命里的角色，我童年时的小女孩，今日锐变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊的能力而强大：他能“偷别人的影子”</p>
                    </div>
                    </li>
                </div>
                <div class="content_right">
                    <div class="content_right1">
                        <li>
                        <div class="content_right1_img">
                            <span><img src="image/bookNo2.gif" id="content_right1_img1" ></span>
                            <span><img src="image/book-02.jpg" id="content_right1_img2"></span>
                        </div>
                        <div class="content_right1_book">
                            <p style="font-size: large;"><a href="">看见（知名央视记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a></p>
                            <p class="text">作者：柴静 著</p>
                            <p class="text">出版社：广西师范大学出版社出版社</p>
                            <p class="text"><span style="color: red;">￥29.40</span>
                                <span style="color: green">  7.4折</span></p>
                        </div>
                        </li>
                    </div>
                    <div class="content_right2">
                        <li>
                        <div class="content_right1_img">
                            <span><img src="image/bookNo3.gif" id="content_right1_img1" ></span>
                            <span><img src="image/book-03.jpg" id="content_right1_img2"></span>
                        </div>
                        <div class="content_right1_book">
                            <p style="font-size: large;"><a href="">改变孩子先改变自己</a></p>
                            <p class="text">作者：贾蓉韬 贾毅 著</p>
                            <p class="text">出版社：作家出版社</p>
                            <p class="text"><span style="color: red;">￥22.20</span>
                                <span style="color: green">  7.4折</span></p>
                        </div>
                        </li>
                    </div>
            </ul>
            
                
                
            </div>
        </div>
        <div class="footer">
            <span>Copyright &copy; 2004 - 2017 当当网. All Rights Reserved</span>
            <img src="image/validate.gif"></a><span>京ICP证041189号</span>
            <span class="sep">|</span><span>出版物经营许可证 新出发京批字第直0673号</span>
        </div>
    </div>
</body>
</html>